<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <div id="app">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    Vue.prototype.$bus = "宁录公交车";


    const Count = ({
        name: 'Count',
        data() {
            return {
                count: 1,
            }
        },
        template: `
        <div>
            <h1>{{count}}</h1>
            <button @click="count++">累加</button>
            <button @click="test">测试</button>
          </div>
        `,
        methods: {
            test() {
                console.log(this.$bus);
            }
        }
    });
    const Person = ({
        name: 'Person',
        data() {
            return {
                name: "laowang",
                age: 18,
            }
        },
        template: `<button @click="test">测试</button>  `,
        methods: {
            test() {
                console.log(this.$bus);
            },
        },
    })
    const vm = new Vue({
        el: "#app",
        components: {
            Count: Count,
            Person: Person,
        },
        data() {
            return {

            }
        },
        template: `
          <div>
            <Count/>
            <hr/>
            <Person/>
          </div>
        `,
    })
</script>

</html>